<template>
  <div class="editor-wrapper">
    <toolbar :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <editor
      v-model="html"
      :style="{ height: height + 'px' }"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
    <div v-if="maxlength" class="useful-num">{{ useLen }}/{{ maxlength }}</div>
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "WangEditor",
  components: { Editor, Toolbar },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    maxlength: {
      type: Number,
      default: 0,
    },
    height: {
      type: [String, Number],
      default: 300,
    },
  },
  watch: {
    value(val) {
      this.html = val;
    },
  },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {
        toolbarKeys: [
          // 菜单 key
          "headerSelect",
          "blockquote",
          // 分割线
          "|",
          // 菜单 key
          "bold",
          "underline",
          "italic",
          "through",
          "color",
          "bgColor",
          "fontSize",
          "lineHeight",
          "fontFamily",
          "bulletedList",
          "numberedList",
          {
            key: "group-more-style", // 必填，要以 group 开头
            title: "", // 必填
            iconSvg:
              "<svg viewBox='0 0 1024 1024'><path d='M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z'></path></svg>", // 可选
            menuKeys: [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify",
            ],
          },
          "code",
          "clearStyle",
          "insertLink",
          "undo",
          "enter",
          "insertTable",
        ],
      },
      editorConfig: {
        placeholder: "请输入内容",
      },
      mode: "default", // or 'simple'
      useLen: 0,
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange() {
      const text = this.editor.getText();
      // 计算当前输入了多少文字
      this.useLen = (text || "").length;
      // 每次富文本内容改变，触发change事件
      this.$emit("change", this.html);
    },
  },
  beforeDestroy() {
    // editor销毁
    const editor = this.editor;
    if (editor == null) {
      return;
    }
    editor.destroy();
  },
};
</script>
<style lang="scss" scoped>
.editor-wrapper {
  z-index: 3;
  position: relative;
  z-index: 999;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  .w-e-toolbar {
    z-index: 2 !important;
    border: solid 1px #e6e9ec !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    .w-e-bar-item {
      padding: 1px;
    }
  }
  .w-e-text-container {
    z-index: 1 !important;
    border: solid 1px #e6e9ec !important;
    border-top: none !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
.useful-num {
  position: absolute;
  right: 6px;
  bottom: 10px;
  z-index: 99999;
  font-size: 12px;
  //   color: $text-3;
  background: #fff;
  padding: 0 6px;
  height: 28px;
  line-height: 28px;
}
</style>
